<template>
	<view class="page-container" style="height: 100%;">
		<view class="poster-container" v-if="haibaoImg">
			<!-- 直接显示生成的海报图片 -->
			<image :src="haibaoImg" mode="widthFix" class="poster-image" @longpress="toSave(haibaoImg)"></image>
			
			<!-- 底部按钮区，现在使用相对定位，并添加白色背景 -->
			<view class="button-background" :style="buttonBackgroundStyle">
				<view class="button-container">
					<button class="action-button save-button" @tap="toSave(haibaoImg)">保存</button>
					<button class="action-button share-button" @tap="showSharePopup">分享</button>
				</view>
			</view>
		</view>
		
		<!-- 生成海报时的加载提示 -->
		<view class="loading-container" v-else>
			<view class="loading-text">海报生成中...</view>
		</view>
		
		<!-- 隐藏的组件用于生成海报 -->
		<view class="hidden-elements">
			<!-- 海报生成组件 -->
			<view v-if="goods && erweimapath">
				<my-poster ref="posterComponent" @success="posterSuccess" :imgSrc="goods.itempic" :QrSrc="erweimapath"
					:Title="goods.itemtitle" :PriceTxt="goods.itemendprice" :OriginalTxt="goods.itemprice" 
					:Referrer="goods.Referrer" :ViewDetails="goods.ViewDetails" :LogoSrc="goods.logoSrc"
					:LineType="false"></my-poster>
			</view>
			
			<!-- 二维码组件 -->
			<view class="code-box-img">
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="value" :options="options" 
					size=600 sizeUnit="rpx" errorCorrectLevel="H"
					:auto="true" @complete="complete"></uqrcode>
			</view>
		</view>
		
		<!-- 分享弹窗 -->
		<u-popup v-model="showShare" mode="center" width="95%">
			<view class="popup-box">
				<view class="popup-box-title">
					请选择要分享到的平台
				</view>
				<view class="popup-box-menu">
					<view class="menu-item" v-for="(item, index) in moduleList" :key="index" @click="shareToChannel(item)">
						<view>
							<image :src="item.configPic" mode="widthFix"></image>
						</view>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="popup-box-button" @click="cancelShare">
					取消分享
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>

	const api = require('../../config/api');
	const util = require('../../utils/util');

	// 显式导入 my-poster 组件
	import myPoster from '@/uni_modules/my-poster/components/my-poster/my-poster.vue'

	export default {
		components: {
			myPoster
		},

		data() {
			return {
				List: [],
				value: '',
				haibaoImg: null,
				haibaoShow: false,
				
				// 二维码图片地址
				erweimapath: "",
				// 商品地址
				goods: {
					"CanvasID": '',
					"itemid": "2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw",
					"itemtitle": "",
					"itemshorttitle": "",
					"itemdesc": "【开丽旗舰店】安心裤型亲肤面料，产后专用不勒刀口，免穿设计方便，超强吸收加长加大款，产妇的优质选择！【赠运费险】",
					"itemprice": "",
					"todaysale": "3",
					"itempic": "/static/img/marketingPoster.png", // 修改默认图片路径
					"itemendprice": "29.91",
					"Referrer": '推荐人',
					"ViewDetails": 'ViewDetails',
					"logoSrc": "/static/img/klld.png" // LOGO图片路径
				},
				
				UserInfo:{},
				options: {
					margin: 10,
					foregroundImageSrc: '/static/img/log.png', // 设置二维码中心的logo
					logoMargin: 5, // logo与二维码之间的空白边距
					logoCornerRadius: 8, // logo的圆角半径
					logoBackgroundColor: '#ffffff', // logo背景色
					logoScale: 0.2, // logo缩放比例，建议0.2-0.3之间
					correctLevel: 3, // 设置二维码的容错级别为最高(3)，必须设为最高以支持logo
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					// 提高二维码质量和清晰度
					scale: 4, // 增加缩放比例
				},
				
				// 分享相关数据
				showShare: false, // 显示分享弹窗
				moduleList: [
					{
						name: '微信',
						type: 'WXSceneSession',
						configPic: '/static/img/ic_pay_wx.png',
						shareType: 0 // 0表示网页链接形式
					},
					{
						name: '微信朋友圈',
						type: 'WXSceneTimeline',
						configPic: '/static/img/wxpyq.png',
						shareType: 0 // 0表示网页链接形式
					}
				],
				
				// 添加超时处理
				timeoutTimer: null,
				
				// 新增：按钮背景位置调整参数
				buttonBackgroundStyle: {
					marginTop: '-100rpx'
				}
			}
		},
		// 设置页面属性，隐藏导航栏
		onLoad() {
			// 隐藏导航栏
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#1678FF'
			});
		},
		onShow() {
			this.getlistConfig();
			this.getUserInfo();
			
			// 设置一个超时处理，以防海报生成过程卡住
			this.timeoutTimer = setTimeout(() => {
				if (!this.haibaoImg) {
					console.error("海报生成超时");
					uni.hideLoading();
					uni.showToast({
						title: "海报生成失败，请重试",
						icon: "none",
						duration: 2000
					});
				}
			}, 15000); // 15秒超时
		},
		onHide() {
			// 清除超时定时器
			if (this.timeoutTimer) {
				clearTimeout(this.timeoutTimer);
			}
		},
		methods: {
			toSave(url) {
				//#ifndef H5
				uni.getImageInfo({
					src: url,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showToast({
									title: '海报已保存相册',
									icon: 'success',
									duration: 2000
								});
							},
							fail: function(err) {
								console.error('保存失败:', err);
								uni.showToast({
									title: '保存失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
					},
					fail: function(err) {
						console.error('获取图片信息失败:', err);
					}
				});
				//#endif
			},
			complete(e) {
				console.log('二维码生成回调:', e);
				console.log('二维码配置信息（包含logo）:', this.options);
				if (e.success) {
					this.sucess = e.success;
					this.isshows = false;
					this.$refs.uqrcode.toTempFilePath({
						success: res => {
							console.log('二维码生成成功:', res.tempFilePath);
							this.erweimapath = res.tempFilePath;
							// 在二维码生成完成后自动生成海报
							this.creadModel();
						},
						fail: err => {
							console.error('二维码临时文件生成失败:', err);
							uni.showToast({
								title: '二维码生成失败',
								duration: 2000,
								icon: 'none'
							});
						}
					});
				} else {
					console.error('二维码生成失败');
					uni.showToast({
						title: '二维码生成失败',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			craeterweimapath(e){
				if (!e) {
					console.error('邀请码为空');
					return;
				}
				console.log('设置二维码值:', api.appRegisterUrl + e);
				this.value = api.appRegisterUrl + e;
			},
			posterSuccess(haibaoImg) {
				console.log('海报生成成功:', haibaoImg);
				// 清除超时定时器
				if (this.timeoutTimer) {
					clearTimeout(this.timeoutTimer);
				}
				
				// 修正：从对象中提取tempFilePath
				if (typeof haibaoImg === 'object' && haibaoImg.tempFilePath) {
					this.haibaoImg = haibaoImg.tempFilePath;
					console.log('设置海报图片路径:', this.haibaoImg);
				} else {
					this.haibaoImg = haibaoImg;
				}
				
				// 海报生成成功后，隐藏加载提示
				uni.hideLoading();
				
				// 海报生成后，延迟一小段时间调整按钮背景位置，确保视觉上的连续性
				setTimeout(() => {
					this.adjustButtonBackground();
				}, 100);
			},
			creadModel() {
				console.log('开始创建海报模型');
				
				// 设置默认值，即使没有用户信息也能显示海报
				this.goods.itempic = '/static/img/marketingPoster.png'; // 确保使用蓝色背景图片
				this.goods.itemtitle = "卡拉灵动"; // 设置标题为产品名称
				this.goods.logoSrc = '/static/img/klld.png'; // 确保Logo路径正确设置
				
				// 尝试设置用户信息
				try {
					if (this.UserInfo && this.UserInfo.user) {
						const userName = this.UserInfo.user.userName || '用户';
						const phone = this.UserInfo.user.phone || '';
						const inviteCode = this.UserInfo.user.inviteCode || '未知码';
						
						this.goods.Referrer = userName + "  " + phone;
						this.goods.ViewDetails = "展业码：" + inviteCode; // 更改为"展业码"
					} else {
						console.warn('用户信息不完整，使用默认值');
						this.goods.Referrer = "推荐人";
						this.goods.ViewDetails = "展业码：获取中";
					}
				} catch (error) {
					console.error('设置用户信息失败:', error);
					this.goods.Referrer = "推荐人";
					this.goods.ViewDetails = "展业码：获取中";
				}
				
				console.log('海报数据设置完成:', this.goods);
				
				this.haibaoShow = true;
				uni.showLoading({
					title: '海报生成中...',
					mask: true
				});
				
				// 使用nextTick确保DOM更新后再操作组件
				this.$nextTick(() => {
					if (this.$refs.posterComponent) {
						console.log('调用海报组件方法');
						if (this.haibaoImg) {
							this.$refs.posterComponent.chongxie();
						}
					} else {
						console.error('海报组件引用不存在');
						// 尝试延迟再调用一次
						setTimeout(() => {
							if (this.$refs.posterComponent) {
								console.log('延迟调用海报组件方法');
								this.$refs.posterComponent.chongxie();
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '海报生成失败',
									icon: 'none',
									duration: 2000
								});
							}
						}, 500);
					}
				});
			},
			async getlistConfig() {
				try {
					const res = await util.request(
						api.listConfigUrl, {},
						'POST'
					);
					if (res.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					} else {
						this.List = res.data;
					}
				} catch (error) {
					console.error('获取配置列表失败:', error);
				}
			},
			async getUserInfo() {
				try {
					const res = await util.request(
						api.getUserInfoUrl, {},
						'POST'
					);
					if (res.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					} else {
						console.log('获取用户信息成功:', res.data);
						this.UserInfo = res.data;
						if (res.data.user && res.data.user.inviteCode) {
							this.craeterweimapath(res.data.user.inviteCode);
						} else {
							console.error('用户邀请码不存在');
						}
					}
				} catch (error) {
					console.error('获取用户信息失败:', error);
				}
			},
			// 新增方法 - 显示分享弹窗
			showSharePopup() {
				this.showShare = true;
			},
			// 新增方法 - 取消分享
			cancelShare() {
				this.showShare = false;
			},
			// 新增方法 - 记录分享操作
			async logShareAction() {
				try {
					// 如果有分享记录API，可以在这里调用
					// 例如：
					// const res = await util.request(
					//   api.listOficialfxUrl,
					//   {},
					//   'POST'
					// );
					console.log('记录分享操作');
				} catch (error) {
					console.error('记录分享操作失败:', error);
				}
			},
			// 新增方法 - 根据选择的渠道分享
			shareToChannel(item) {
				// 检查分享所需的数据
				if (!this.value || !this.UserInfo || !this.UserInfo.user) {
					uni.showToast({
						title: '分享信息获取失败，请重试',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				try {
					// 记录分享操作
					this.logShareAction();
					
					// 准备分享所需的数据
					const shareUrl = this.value; // 二维码对应的链接
					const userName = this.UserInfo.user.userName || '用户';
					const title = `${userName}邀请您加入卡拉灵动`; // 分享标题
					const inviteCode = this.UserInfo.user.inviteCode || '';
					const description = `${userName}邀请您注册卡拉灵动，展业码: ${inviteCode}`; // 分享描述
					const thumbUrl = '/static/img/log.png'; // 缩略图
					
					// 复制文字到剪贴板
					// uni.setClipboardData({
					// 	data: description,
					// 	success: () => {
					// 		console.log('文字已复制到剪贴板');
					// 	},
					// 	fail: (err) => {
					// 		console.error('复制文字失败:', err);
					// 	}
					// });
					
					// 分享到对应渠道
					// #ifdef APP-PLUS
					uni.share({
						provider: "weixin",
						scene: item.type, // WXSceneSession 或 WXSceneTimeline
						type: item.shareType, // 0表示网页链接形式
						title: title,
						summary: description,
						imageUrl: thumbUrl,
						href: shareUrl,
						success: () => {
							console.log('分享成功');
							uni.showToast({
								title: '分享成功',
								icon: 'success'
							});
							this.showShare = false;
						},
						fail: (err) => {
							console.error('分享失败:', err);
							uni.showToast({
								title: '分享失败',
								icon: 'none'
							});
						}
					});
					// #endif
					
					// #ifndef APP-PLUS
					// 在非APP环境下使用系统分享
					this.fallbackSystemShare(shareUrl, title, description);
					// #endif
				} catch (error) {
					console.error('分享过程出错:', error);
					uni.showToast({
						title: '分享失败，请重试',
						icon: 'none'
					});
				}
			},
			// 备用系统分享
			fallbackSystemShare(url, title, description) {
				// 尝试使用系统分享功能
				uni.shareWithSystem({
					type: 'text',
					summary: description,
					href: url,
					title: title,
					imageUrl: '/static/img/log.png',
					success() {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						});
					}
				});
			},
			// 新增方法：调整按钮背景位置
			adjustButtonBackground() {
				// 如果有需要，这里可以根据不同设备进行调整
				const systemInfo = uni.getSystemInfoSync();
				// 根据屏幕尺寸调整按钮背景的上边距
				if(systemInfo.windowWidth > 375) {
					// 大屏幕设备
					this.buttonBackgroundStyle = {
						marginTop: '-100rpx'
					};
				} else {
					// 小屏幕设备
					this.buttonBackgroundStyle = {
						marginTop: '-100rpx'
					};
				}
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 0;
		margin: 0;
		overflow: hidden;
		background-color: #f4f4f4; /* 添加页面背景色，更好地突出海报和按钮 */
	}
	
	.poster-container {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		// background-color: #ffffff;
		background-image: url('../../static/img/marketingPoster.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0;
		margin: 0;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto; /* 允许纵向滚动，适应不同屏幕高度 */
	}
	
	.poster-image {
		width: 100%;
		margin-top: 0;
		padding-top: 0;
		display: block;
	}
	
	/* 新增白色背景区域，作为白色背景的延续 */
	.button-background {
		width: calc(100% - 175rpx);  /* 与海报中白色背景宽度一致，boxMargin = C_P * 3，C_P = 30upx，所以两边各90rpx */
		background-color: #ffffff;
		border-radius: 0 0 16rpx 16rpx; /* 只设置底部圆角 */
		/* 简化阴影，使用单一阴影配置但仅应用于底部和两侧 */
		box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.18);
		padding: 30rpx 0;
		margin: -16rpx auto 40rpx;  /* 负上边距使其与海报重叠，看起来是连续的，底部留出一定空间 */
		position: relative;
		z-index: 10;
	}
	
	.button-container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	
	.action-button {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		margin: 0 20rpx;
		font-size: 30rpx;
		color: #fff;
		font-weight: bold;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
		transition: all 0.2s ease;
	}
	
	.action-button:active {
		transform: scale(0.98);
		opacity: 0.9;
	}
	
	.save-button {
		background-color: #1678FF;
	}
	
	.share-button {
		background-color: #1abc9c;
	}
	
	.loading-container {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.loading-text {
		font-size: 32rpx;
		color: #666;
	}
	
	.hidden-elements {
		position: absolute;
		width: 100%;
		height: 1px;
		opacity: 0.01; /* 设为接近透明但不完全透明 */
		overflow: hidden;
		z-index: -1;
	}
	
	.code-box-img {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		opacity: 0.01;
	}
	
	// 新增的分享弹窗样式
	.popup-box {
		width: 100%;
		background-color: #E9EFF2;
	}

	.popup-box-title {
		text-align: center;
		color: #575A5C;
		height: 90rpx;
		line-height: 90rpx;
	}

	.popup-box-menu {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 30rpx;
	}

	.menu-item {
		text-align: center;
		padding: 20rpx 0;
	}

	.menu-item image {
		width: 80rpx;
		height: 80rpx;
	}

	.menu-item > view {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 26rpx;
		padding: 10rpx 0;
	}

	.popup-box-button {
		background-color: #FFFFFF;
		text-align: center;
		color: #575A5C;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx;
	}
</style>